<template>
  <div>
    <div class="header">
      <div class="title"><i class="el-icon-s-help"></i> 
        示例页面<span>(示例页面全部采用拖拽生成)</span>
      </div>
      <div class="back" @click="back">
        <i class="el-icon-arrow-left"></i>返回
      </div>
    </div>
    <main class="main">
      <div class="left-div">
        <div>
          <el-button type="primary" round @click="showForm(1)"
            ><i class="el-icon-star-off"></i> 疫情上报登记表</el-button
          >
        </div>
        <div>
          <el-button type="primary" round @click="showForm(2)"
            ><i class="el-icon-star-off"></i>
            大学生日常消费状况问卷表</el-button
          >
        </div>
        <div>
          <el-button type="primary" round @click="showForm(3)"
            ><i class="el-icon-star-off"></i> 古诗词展示</el-button
          >
        </div>
        <div>
          <el-button type="primary" round @click="showForm(4)"
            ><i class="el-icon-star-off"></i> 商品评价表单</el-button
          >
        </div>
      </div>
      <div class="right-div">
        <!-- 表单生成器 -->
        <form-generator :eleList="eleList" ref="Cform"></form-generator>
        <!-- 获取数据按钮 -->
        <el-button v-if="eleList" type="primary" @click="getFormValue">
          获取数据
        </el-button>
        <!-- 查看JSON -->
        <el-button v-if="eleList" type="success" @click="getFormJson">
          查看JSON
        </el-button>
      </div>
    </main>
    <!-- 表单数据框 -->
    <el-dialog :title="dialogTitle" :visible.sync="jsonDialog" top="5vh">
      <div style="max-height: 400px; overflow-y: scroll">
        <el-input type="textarea" autosize readonly v-model="jsonmsg">
        </el-input>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import formGenerator from "../formGenerator/index";
import { demo1, demo2, demo3, demo4 } from "./formjson";
import { copy as util_Copy } from "../../util/clone";
export default {
  components: {
    formGenerator: formGenerator,
  },
  data() {
    return {
      // 表单数据信息
      eleList: null,
      // 示例表单数据
      demo1: demo1,
      demo2: demo2,
      demo3: demo3,
      demo4: demo4,
      // 是否弹框
      jsonDialog: false,
      // 弹框标题
      dialogTitle: "表单数据",
      // 弹框内容
      jsonmsg: "",
    };
  },
  methods: {
    back() {
      this.$router.go(-1); //返回上一层
    },
    // 展示表单
    showForm(index) {
      if (index === 1) {
        this.eleList = this.demo1;
      }
      if (index === 2) {
        this.eleList = this.demo2;
      }
      if (index === 3) {
        this.eleList = this.demo3;
      }
      if (index === 4) {
        this.eleList = this.demo4;
      }
    },
    getFormValue() {
      // 调用表单生成器的getFormVal方法获取表单数据
      this.$refs.Cform.getFormVal().then((data) => {
        this.dialogTitle = "表单数据";
        this.jsonDialog = true;
        this.jsonmsg = JSON.stringify(data, null, 1);
      });
    },
    getFormJson() {
      this.dialogTitle = "表单JSON";
      this.jsonDialog = true;
      let formjson = util_Copy(this.eleList);
      this.jsonmsg = JSON.stringify(formjson, null, 1);
    },
  },
};
</script>

<style scoped>
.header {
  width: 100%;
  height: 6%;
  display: flex;
  align-items: center;
  background: #409eff;
  position: absolute;
  color: white;
  top: 0;
}
.main {
  position: absolute;
  top: 6%;
  height: 94%;
  width: 100%;
  display: grid;
  grid-template-columns: 20% 80%;
}
.left-div {
  border-right: 1px solid #999999;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-template-rows: repeat(auto-fill, 50px);
  justify-content: space-evenly;
  justify-items: center;
  align-items: center;
}
button {
  width: 200px;
}
.title {
  margin-left: 2em;
  cursor: default;
}
.back {
  position: absolute;
  right: 15px;
  cursor: pointer;
}

.right-div {
  overflow-y: auto;
  padding: 10px;
}
</style>